<script
	lang="ts"
	setup
>
import RenderGender from '@/components/RenderGender.vue'
import { GOODS_STATUS_MAP } from '@/const/goods'
import { DELIVER_TYPE_MAP } from '@/const/order';
import { formatTime, renderMaybeNull } from '@/utils';
import { computed } from 'vue'

interface IProps {
	show: boolean;
	data: any;
	width?: number | string;
}

const emit = defineEmits(['update:show'])
const props = withDefaults(defineProps<IProps>(), {
	width: 500
})

const showDrawer = computed(() => props.show)

// const detail = ref({
// 	...OSystemMessageDetailGetValue
// })

// watch(() => props.show, () => {
// 	if (props.show) {
// 		getDetail()
// 	}
// })

function onUpdateShow(show: boolean) {
	emit('update:show', show)
}


// async function getDetail() {
// 	const { code, data } = await systemMessageDetailGet({
// 		id: props.data.id
// 	})
//
// 	if (code === 200) {
// 		detail.value = data
// 	}
// }
</script>

<template>
	<n-drawer
		v-model:show="showDrawer"
		:width="width"
		close-on-esc
		@update:show="onUpdateShow"
	>
		<n-drawer-content closable>
			<template #header>
				<div class="drawerHeader">
					{{ data.title }}
				</div>
			</template>
			<section>
				<div>
					<div class="infoItem">
						<div class="label">消息类型：</div>
						<div class="value">{{ data.category }}</div>
					</div>
					<div class="infoItem">
						<div class="label">消息内容：</div>
						<div class="value">{{ data.content }}</div>
					</div>
					<div class="infoItem">
						<div class="label">推送时间：</div>
						<div class="value">{{ data.createTime }}</div>
					</div>
					<div class="infoItem">
						<div class="label">接收人：</div>
						<div class="value">{{ data.toUserId }}</div>
					</div>
				</div>
			</section>
		</n-drawer-content>
	</n-drawer>
</template>

<style
	lang="less"
	scoped
>

.drawerHeader {
	display: flex;
	align-items: stretch;

	:deep(.n-avatar) {
		flex-shrink: 0;
	}

	.flex {
		flex-grow: 1;
		margin-left: 20px;
		display: flex;
		align-items: center;
		width: 0;

		.info {
			width: 100%;
		}

		.desc {
			margin-top: 10px;
			font-size: 14px;
		}
	}

	.right {
		margin-left: 10px;
		margin-right: 10px;
		font-size: 14px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}
}

.infoItem {
	display: flex;
	line-height: 1.5;
	margin-bottom: 10px;
	font-size: 14px;

	.label {
		width: 100px;
		flex-shrink: 0;
	}

	.value {
		color: var(--n-close-icon-color-pressed);
	}
}
</style>
